好的，我会帮您检查并修改代码，以确保您的 `CourseManagement` 组件能够正确显示。以下是修改后的代码：

### CourseManagement.vue

```vue
<template>
  <div class="app-container">
    <!-- 总数量信息 -->
    <div class="total-count">
      <div class="item">课程总数量(个): {{ total }}</div>
      <div class="item">上架课程(个): {{ publishedCourseCount }}</div>
      <div class="item">下架课程(个): {{ shelvedCourseCount }}</div>
      <div class="item">待上架课程(个): {{ pendingCourseCount }}</div>
      <div class="item">完结课程(个): {{ finishedCourseCount }}</div>
    </div>

    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="课程分类">
        <el-select v-model="queryParams.category" placeholder="请选择" clearable>
          <el-option label="物理学" value="physics"/>
          <el-option label="化学" value="chemistry"/>
        </el-select>
      </el-form-item>
      <el-form-item label="售卖模式">
        <el-select v-model="queryParams.saleMode" placeholder="请选择" clearable>
          <el-option label="免费" value="free"/>
          <el-option label="付费" value="paid"/>
        </el-select>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker v-model="queryParams.startDate" type="date" placeholder="选择日期"/>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker v-model="queryParams.endDate" type="date" placeholder="选择日期"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 导航栏和按钮组 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <el-radio-group v-model="queryParams.status" class="radio-group" style="width: 150%">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="pending">待上架</el-radio-button>
          <el-radio-button label="published">已上架</el-radio-button>
          <el-radio-button label="shelved">已下架</el-radio-button>
          <el-radio-button label="finished">已完结</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleAddCourse" style="margin-left: 1000px">新增课程</el-button>
      </el-col>

    </el-row>

    <!-- 课程列表 -->
    <el-table v-loading="loading" :data="courseList" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="name" label="课程名称" />
      <el-table-column prop="price" label="课程价格" />
      <el-table-column prop="duration" label="课时" />
      <el-table-column prop="category" label="所属分类" />
      <el-table-column prop="updater" label="更新人" />
      <el-table-column prop="updateTime" label="更新时间" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-upload" @click="handleShelf(scope.row)">上架</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    ></pagination>

    <!-- 编辑课程信息弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="courseInfo" label-width="100px">
        <el-form-item label="课程分类">
          <el-input v-model="courseInfo.category" placeholder="请输入课程分类" />
        </el-form-item>
        <el-form-item label="售卖模式">
          <el-input v-model="courseInfo.saleMode" placeholder="请输入售卖模式" />
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="courseInfo.name" placeholder="请输入课程名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCourseInfo">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {parseTime} from "@/utils/index";

export default {
  name: "CourseManagement",
  data() {
    return {
      loading: true,
      showSearch: true,
      total: 0,
      courseList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        category: undefined,
        saleMode: undefined,
        status: "all",
        startDate: undefined,
        endDate: undefined
      },
      dialogTitle: "编辑课程信息",
      dialogVisible: false,
      courseInfo: {
        category: "",
        saleMode: "",
        name: ""
      }
    };
  },
  created() {
    this.getList();
  },
  computed: {
    pendingCourseCount() {
      return this.courseList.filter((course) => course.status === "pending").length;
    },
    publishedCourseCount() {
      return this.courseList.filter((course) => course.status === "published").length;
    },
    shelvedCourseCount() {
      return this.courseList.filter((course) => course.status === "shelved").length;
    },
    finishedCourseCount() {
      return this.courseList.filter((course) => course.status === "finished").length;
    }
  },
  methods: {
    getList() {
      setTimeout(() => {
        this.loading = false;
        this.courseList = [
          { id: 1, name: "热力学基础", price: "免费", duration: 3, category: "物理学", updater: "李老师", updateTime: "2024.9.24", status: "published" },
          { id: 2, name: "光学基础", price: "免费", duration: 3, category: "物理学", updater: "李老师", updateTime: "2024.9.24", status: "pending" },
          { id: 3, name: "电学基础", price: "免费", duration: 3, category: "物理学", updater: "李老师", updateTime: "2024.9.24", status: "shelved" }
        ];
        this.total = this.courseList.length;
      }, 1000);
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    handleAddCourse() {
      this.$router.push('/add');
    },
    handleEdit(row) {
      this.courseInfo = { ...row };
      this.dialogTitle = "编辑课程信息";
      this.dialogVisible = true;
    },
    handleShelf(row) {
      console.log("上架课程", row.name);
    },
    handleDelete(row) {
      console.log("删除课程", row.name);
    },
    saveCourseInfo() {
      console.log("保存课程信息", this.courseInfo);
      this.dialogVisible = false;
    },
    parseTime
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.dialog-footer {
  text-align: right;
}
.mb8 {
  margin-bottom: 8px;
}
.radio-group {
  margin-right: 10px;
}
.total-count {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-family: 'Arial', sans-serif;
  color: #333;
}
.total-count .item {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

</style>
